<template>
  <div class="w-100 h-100 d-flex flex-column ai-center jc-between">
    <div class="w-100 px-5">
      <div class="w-100 d-flex jc-around">
        <div class="message" v-for="i in direct1" :key="i.id" @click="handleClick(i)">
          <CommonCard :isSelect="i.isSelect">
            <div class="message-inner h-100 d-flex flex-column ai-center jc-around">
              <div class="ghost" :style="{backgroundImage:`url(${i.icon} )`}" />
              <div class="xin" :style="{backgroundImage:`url(${i.text} )`}" />
            </div>
          </CommonCard>
        </div>
      </div>
      <div class="w-100 d-flex d-flex jc-around">
        <div class="message" v-for="i in direct2" :key="i.id" @click="handleClick(i)">
          <CommonCard :isSelect="i.isSelect">
            <div class="message-inner h-100 d-flex flex-column ai-center jc-around">
              <div class="ghost" :style="{backgroundImage:`url(${i.icon} )`}" />
              <div class="xin" :style="{backgroundImage:`url(${i.text} )`}" />
            </div>
          </CommonCard>
        </div>
      </div>
    </div>
    <div class="btn-contain w-100 h-100 d-flex flex-column ai-center jc-center" v-if="!isSelect">
      <div class="btn"></div>
    </div>
  </div>
</template>

<script>
import CommonCard from "@/components/CommonCard.vue";

// import Sure from './components/Sure'

import { mapGetters } from "vuex";
import createAPI from "@/utils/createAPI.js";
import { getToken } from "@/api/user.js";

export default {
  name: "StepThree",
  components: {
    CommonCard
  },
  computed: {
    ...mapGetters(["isSelect"])
  },
  data() {
    return {
      // :false,
      direct1: [
        {
          id: 0,
          icon: require("@/assets/images/step3/icon-1.png"),
          text: require("@/assets/images/step3/text-1.png"),
          isSelect: false,
          l1: require("@/assets/images/ft/l1.png"),
          l2: require("@/assets/images/ft/l2.png"),
          l3: require("@/assets/images/ft/l3.png"),
          url: "/dashboard/ft"
        },
        {
          id: 1,
          icon: require("@/assets/images/step3/icon-2.png"),
          text: require("@/assets/images/step3/text-2.png"),
          isSelect: false,
          l1: require("@/assets/images/ft/htl1.png"),
          l2: require("@/assets/images/ft/htl2.png"),
          url: "/dashboard/hq"
        }
      ],
      direct2: [
        {
          id: 2,
          icon: require("@/assets/images/step3/icon-3.png"),
          text: require("@/assets/images/step3/text-3.png"),
          isSelect: false,
          l1: require("@/assets/images/ft/myl1.png"),
          l2: require("@/assets/images/ft/myl2.png"),
          url: "/dashboard/my"
        },
        {
          id: 3,
          icon: require("@/assets/images/step3/icon-4.png"),
          text: require("@/assets/images/step3/text-4.png"),
          isSelect: false,
          l1: require("@/assets/images/ft/kyl1.png"),
          l2: require("@/assets/images/ft/kyl2.png"),
          url: "/dashboard/ky"
        }
      ]
    };
  },
  methods: {
    handleClick(i) {
      if (!this.isSelect) {
        let direName = "direct1";
        if (i.id > 2) {
          direName = "direct2";
        }
        this.$set(this[direName][i.id % 2], "isSelect", true);
        this.$store.commit("app/CHANGE_IS_SELECT", true);

        import("./components/Sure").then(dialog => {
          const d = createAPI(dialog.default, {
            l1: i.l1,
            l2: i.l2,
            l3: i.l3
          });

          d.$on("close", () => {
            d.remove();
            this.$set(this[direName][i.id%2], "isSelect", false);
            this.$store.commit("app/CHANGE_IS_SELECT", false);
          });
          d.$on("begin", () => {
            this.$router.push(i.url);
            this.$store.commit("app/CHANGE_IS_AS", true);
          });
        });
      }
    }
  },
  mounted(){
    getToken()
  }
};
</script>

<style lang="scss" scoped>
.btn-contain {
  padding: 0.4rem /* 12/112 */ 0;
}
.message {
  width: 3.822rem;
  height: 4.613rem;
  margin-top: 0.5rem;
}

.btn {
  width: 5.511rem /* 573/112 */;
  height: 0.462rem /* 164/112 */;
  background-image: url(../../assets/images/step3/text.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // margin-top: 0.5rem;
}

.message-inner {
  opacity: 1;
  padding: 0.4rem /* 12/112 */ 0;

  .ghost {
    width: 1.386rem;
    height: 1.55rem;

    // background-image: url(../../assets/images/step3/icon-1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .xin {
    // margin-top: 1.339286rem /* 150/112 */;
    opacity: 1;

    width: 2.017rem /* 507/112 */;
    height: 1.288rem /* 248/112 */;

    // background-image: url(../../assets/images/step3/text-1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
</style>